<template>
    <el-dialog
            :title="type==='add'?'新增用户':'编辑用户'"
            :visible.sync="dialogVisible"
            width="500px"
            :before-close="closeDialog"
    >
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" style="width:400px">
            <el-form-item label="管理员名称" prop="nickname">
                <el-input v-model="form.nickname" placeholder="输入管理员名称"></el-input>
            </el-form-item>
            <el-form-item label="电话号码" prop="mobile">
                <el-input :disabled="type==='edit'" v-model="form.mobile" placeholder="电话号码"></el-input>
            </el-form-item>
            <el-form-item label="用户角色" prop="roleId">
                <el-select v-model="form.roleId" placeholder="请选择">
                    <el-option
                            v-for="item in roleList"
                            :key="item.value"
                            :label="item.roleTitle"
                            :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="归属部门" prop="locked">
                <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门"/>
            </el-form-item>
            <el-form-item label="状态" prop="locked">
                <el-radio v-model="form.locked" :label="1">可用</el-radio>
                <el-radio v-model="form.locked" :label="2">锁住</el-radio>
            </el-form-item>

            <el-form-item style="margin-top:40px">
                <el-button style="width:100px;" type="primary" @click="submit" :loading="loading">提交</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>
<script>
    import {role_list} from "@/api/sysrole";
    import {dept_tree} from "@/api/sysdept";
    import {admin_add, admin_update, admin_detail} from "@/api/sysuser";
    import {validatePhone} from "@/utils/validata";

    import Treeselect from '@riophae/vue-treeselect'
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'


    export default {
        components: {
            Treeselect
        },
        props: {
            dialogVisible: {
                type: Boolean,
                default: false
            },
            type: {
                type: String,
                default: "add"
            },
            editId: {
                type: Number,
                default: 0
            }
        },

        data() {
            return {

                loading: false,
                form: {
                    nickname: "",
                    mobile: "",
                    roleId: "",
                    avatar: "",
                    locked: 1,
                    deptId: "",
                    sysUserId: this.$route.query.editId
                },
                rules: {
                    nickname: [
                        {required: true, message: "请输入管理员名称", trigger: "blur"}
                    ],
                    mobile: [
                        {required: true, validator: validatePhone, trigger: "blur"}
                    ],
                    roleId: [{required: true, message: "请选择", trigger: "blur"}],
                    locked: [{required: true, message: "请选择", trigger: "blur"}],
                    avatar: [{required: true, message: "请上传", trigger: "blur"}]
                },
                roleList: [],
                deptOptions: undefined
            };
        },

        watch: {
            editId() {
                if (this.type === "edit") {
                    admin_detail(this.editId).then(res => {
                        this.form = res.data;
                    });
                } else {
                    this.form = {
                        nickname: "",
                        mobile: "",
                        roleId: "",
                        locked: 1,
                        avatar: ""
                    };
                }
            }
        },
        mounted() {
            this.initRoles();
            this.deptTree();
        },
        methods: {

            /**
             * 提交任务
             */
            submit() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if (this.type === "add") {
                            admin_add(this.form).then(() => {
                                this.$message.success("新增成功");
                                this.$emit("update:dialogVisible", false);
                                this.$emit("submit");
                            });
                        }

                        if (this.type === "edit") {
                            admin_update(this.form).then(() => {
                                this.$message.success("更新成功");
                                this.$emit("update:dialogVisible", false);
                                this.$emit("submit");
                            });
                        }
                    }
                });
            },
            initRoles() {
                role_list().then(res => {
                    if (res.status === 200) {
                        this.roleList = res.data;
                    }
                })
            },
            //树形部门列表
            deptTree() {
                dept_tree().then(res => {
                    if (res.status === 200) {
                        this.deptOptions = res.data;
                    }
                })
            },
            /**
             * 关闭弹窗
             */
            closeDialog() {
                this.$emit("update:dialogVisible", false);
            },
        }
    };
</script>
<style lang="less">
</style>
